<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>用户</title>
    <link rel="stylesheet" href="../layui-v2.6.8/layui/css/layui.css">
    <script src="./js/vue.js"></script>
    <script src="../layui-v2.6.8/layui/layui.js"></script>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <link rel="stylesheet" href="css/index.css">
    <script>
        // 获取指定名称的cookie
        function getCookie(name){
            let strcookie = document.cookie;//获取cookie字符串
            let arrcookie = strcookie.split("; ");//分割
            //遍历匹配
            for ( var i = 0; i < arrcookie.length; i++) {
                var arr = arrcookie[i].split("=");
                if (arr[0] == name){
                    return arr[1];
                }
            }
            return "";
        }
        window.onload = ()=>{
            $.post("../api/login_authentication.php",{
                "id":getCookie("user_id"),
                "Token":getCookie("Token"),
                "userTime":Date.parse(new Date())
            },(data)=>{
                if(JSON.parse(data)['status'] == 200){
                    console.log("登录成功");
                }else {
                    alert("登录失败");
                }
            });
        }
    </script>
</head>
<body>
    <div id="app">
        <div class="layui-container">
            <div class="layui-card" v-for="(item,index) in file_list" v-bind:class="{file_tips:true}">
                <div class="layui-card-header">{{item['file_title']}}</div>
                <div class="layui-card-body">
                    <div class="preview_txt">文件预览（正在开发）</div>
                    <div class="file_div">
                        <button class="layui-btn" v-on:click="modify_file(index)" v-bind:value="file_list[index]['file_name']">修改</button>
                        <button class="layui-btn" v-on:click="file_remove(index)">删除</button>
                        <button class="layui-btn" v-on:click="get_file_url(index)">获取链接</button>
                    </div>
                </div>
            </div>
            <button id="new_word" class="layui-btn layui-btn-normal" v-on:click="new_word()" >新建</button>
        </div>
    </div>
</body>
<script>
    const  vm = new Vue({
        el:"#app",
        data:{
            file_list:[],
            file_name:"", //当前文件名
            file_index:"",
            index:"" //当前弹出层
        },
        methods:{
            get_file_list:function (){
                //获取文件列表
                $.post("../api/get_file_list.php",{
                    "id":getCookie("user_id"),
                    "Token":getCookie("Token"),
                    "userTime":Date.parse(new Date())
                },function (data){
                    let data_json = JSON.parse(data);
                    if(data_json['status'] == 200){
                        vm.file_list = [];
                        let data_json_data = data_json['data'];
                        for(let i in data_json_data){
                            vm.file_list.push(data_json_data[i]);
                        }
                    }
                })
            },
            modify_file: function (index){
                //修改文件
                vm.file_index = index;
                $.get("modify_file.html", function(str){
                        vm.index = layer.open({
                        type: 1,
                        area: ['90%', '90%'],
                        content: str //注意，如果str是object，那么需要字符拼接。
                    });
                });
            },
            new_word:function (){
                //新建文件
                $.post("../api/write_file.php",{
                    "id":getCookie("user_id"),
                    "Token":getCookie("Token"),
                    "userTime":Date.parse(new Date()),
                    "file_name":"",
                    "txt":"",
                    "title":""
                },function (data) {
                    let data_json = JSON.parse(data);
                    console.log(data_json)
                    if(data_json['status'] == 200){
                        layer.msg("新建成功");
                        vm.file_list.push(data_json['data']);//添加文件
                    }
                })
            },
            file_remove:function (index){
                $.post("../api/file_remove.php",{
                    "id":getCookie("user_id"),
                    "Token":getCookie("Token"),
                    "userTime":Date.parse(new Date()),
                    "file_name":vm.file_list[index]['file_name'],
                },function (data) {
                    let data_json = JSON.parse(data);
                    console.log(data_json)
                    if(data_json['status'] == 200){
                        vm.file_list.splice(index,1); //删除
                        layer.msg(data_json['msg']);
                    }else {
                        layer.msg(data_json['status'] + ":" + data_json['msg']);
                    }
                })
            },
            get_file_url:function (index){
                layer.open({
                    title: '文件链接',
                    content: window.location.origin + "/" +  vm.file_list[index]['file_name'] + "." +  vm.file_list[index]['file_type']
                });
            }
        },
        created(){
            this.get_file_list();
        }
    })
</script>
</html>